<template>
    <div class="main column">
        <filter-bar
            class="menu"
            :startTime="filterInfo.lTime"
            :endTime="filterInfo.rTime"
            @dateChange="confirmDateChange"
        ></filter-bar>
        <div class="every">
            <div class="cells" v-for="item in allCards" :key="item.yearMonth">
                <div class="time">
                    <span class="text"> {{ item.date.year }}</span> 年
                    <span class="text"> {{ item.date.month }} </span> 月
                </div>
                <div class="cards">
                    <div
                        class="card column"
                        v-for="card in item.cards"
                        :key="card._id"
                        @click="showCard(card._id)"
                    >
                        <mini-card
                            :content="card"
                            height="240rpx"
                            width="150rpx"
                        ></mini-card>
                        <div>
                            {{ new Date(card.date).getDate() }}
                        </div>
                    </div>
                </div>
            </div>

            <div class="loadMore row" @click="loadMore">点击加载更多</div>
        </div>
        <div class="tabbar row">
            <van-search
                class="row"
                :value="filterInfo.keyword"
                placeholder="请输入搜索关键词"
                @change.native="changeKeyword"
                @blur.native="showSearch"
                use-left-icon-slot
                input-align="center"
            >
                <div
                    slot="left-icon"
                    style="font-size: 50rpx; padding: 0 4rpx"
                    class="material-icons-outlined"
                    @click="showSearch"
                >
                    search
                </div>
            </van-search>
            <van-button type="primary" @click="queryFilter">筛选</van-button>
            <van-button
                type="primary"
                v-if="isSearching"
                class="material-icons-outlined"
                style="font-size: 1.2rem"
                @click="cancelSearch"
            >
                <span style="font-size: 34rpx">cancel</span>
            </van-button>
        </div>
    </div>
</template>

<script>
import vanIndexBar from "@/wxcomponents/weapp/dist/index-bar/index";
import vanSearch from "@/wxcomponents/weapp/dist/search/index";
import filterBar from "./filterBar.vue";

import vanIndexAnchor from "@/wxcomponents/weapp/dist/index-anchor/index";
import dataPicker from "./dataPicker.vue";
import { mapState } from "vuex";

import miniCard from "@/pages/index/miniCard.vue";
import $store from "@/store/index";
export default {
    components: {
        dataPicker,
        miniCard,
        vanIndexBar,
        vanIndexAnchor,
        vanSearch,
        filterBar,
    },

    computed: {
        ...mapState({
            requestCards: (state) => state.xinyuqian.allXin.requestResult,
            isSearching: (state) =>
                state.xinyuqian.allXin.requestResult.$branch === "temp",
        }),
        allCards() {
            // 将文件依据 年 和 月 进行分类
            const collection = [];
            collection.indexList = [];
            return this.requestCards.reduce((col, item) => {
                const dateObj = new Date(item.date);

                const date = {
                    year: dateObj.getFullYear(),
                    month: dateObj.getMonth() + 1,
                };
                const yearMonth = `${date.year} ${date.month}`;
                // date 属性名直接赋值于 数组 上
                if (col.hasOwnProperty(yearMonth)) {
                    col[yearMonth].cards.push(item);
                } else {
                    col[yearMonth] = {
                        date,
                        yearMonth,
                        cards: [item],
                    };

                    col.push(col[yearMonth]);
                    col.indexList.push(yearMonth);
                }
                return col;
            }, collection);
        },
    },
    data() {
        return {
            showFilter: false,
            filterInfo: {
                keyword: "",
                lTime: 1588262400000,
                rTime: new Date().getTime(),
            },
            searchBarWidth: "120rpx",
        };
    },

    methods: {
        confirmDateChange(newObj) {
            this.filterInfo = { ...this.filterInfo, ...newObj };
        },
        queryFilter() {
            this.requestCards.search(this.filterInfo);
        },
        cancelSearch() {
            this.requestCards.searchOut();
        },
        changeKeyword({ detail }) {
            this.filterInfo.keyword = detail;
        },
        showSearch() {
            this.searchBarWidth =
                this.searchBarWidth === "100%" ? "120rpx" : "100%";
        },
        loadMore() {
            this.requestCards.$next();
        },
        showCard(_id) {
            console.log(_id);
            $store.commit("firstPageXinSwitchTo", _id);
            wx.navigateTo({ url: "/pages/index/index" });
        },
    },
};
</script>

<style lang="less" scoped>
.main {
    height: 100%;
}
.loadMore {
    background-color: #4fc08d;
    color: white;
    font-weight: bolder;
    width: 100%;
    padding: 20rpx 0;
}
.every {
    background-color: #fafafa;
    width: 100%;
    flex: 1;
    overflow-y: scroll;
    justify-content: end !important;
    .cells {
        background-color: #fff;
        width: 100%;
        margin: 48rpx 0;
        box-shadow: 1px 5px 12px hsl(0deg 0% 88%);
    }
    .time {
        padding: 48rpx;
        font-weight: bold;
        font-size: 24rpx;
        .text {
            font-size: 48rpx;
        }
    }
    .cards {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        .card {
            flex: 1;
            margin: 20rpx;
        }
    }
}
.menu {
    width: 100%;
}
.filter {
    font-size: 50rpx;
    background-color: #f7f8fa;
    padding: 10rpx 20rpx;
}
.tabbar {
    padding: 32rpx 0;
    justify-content: space-evenly;
    box-shadow: 0 -6px 12px #ebedf0;
    width: 100%;
}
.btn {
    font-size: 40rpx !important;
    background-color: #4fc08d;
    color: #fafafa;
    height: 52rpx;
    min-width: 88rpx;
}
</style>
